import { Button, Typography } from 'antd'
import React, { memo, useState, ChangeEvent, useCallback } from 'react'
interface Props {
  onchange: (e: ChangeEvent<HTMLInputElement>) => void
}
const Child = memo<Props>(({ onchange }) => {
  console.log('子组件渲染~~')
  return <input type="text" onChange={onchange} />
})
/**
 * 父组件传入子组件函数；
 * 当父组件发生变化，子组件也会重新渲染，将函数缓存配合 memo 使用；
 * 使用memo进行包裹缓存组件，相当于 PureCompoennt
 */
const UseCallbackComponent: React.FC = () => {
  const [count, setCount] = useState(0)

  // 点击子组件不会重新渲染
  const onchange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value)
  }, [])
  return (
    <>
      <Typography.Title>{count}</Typography.Title>
      <Button onClick={() => setCount(count + 1)}>+1</Button>
      <Child onchange={onchange} />
    </>
  )
}

export default UseCallbackComponent
